<template>
	<base-popup :title="$t('validate.realname')" :modelValue="modelValue" @close="onClose">
		<div class="py-[15px] px-[25px]">
			<base-title
				:title="$t('validate.contentTitle')"
				:subtitle="$t('validate.contentSubtitle1')"
				showSubIcon></base-title>
			<div style="height: 20px"></div>
			<base-input
				v-model.trim="realname"
				:error="realnameError"
				:label="$t('validate.realname')"
				clearable></base-input>
			<div class="h-5"></div>
			<base-button
				type="primary"
				block
				round
				:disabled="submitDisabled"
				:loading="loading"
				@click="onSubmit">
				{{ $t('action.confirm') }}
			</base-button>
		</div>
	</base-popup>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useProfileStore } from '@/store'
import { setRealname } from '@/api/profile'
import { t } from '@/utils'
import { useMessage } from '@/hooks'
import { BasePopup, BaseTitle, BaseButton, BaseInput } from '@/components/base'

defineProps({
	modelValue: {
		type: Boolean,
		default: false
	}
})

const message = useMessage()
const profileStore = useProfileStore()

const realname = ref('')

const realnameError = computed(() =>
	realname.value && realname.value.length < 1 ? t('validate.nameError') : ''
)

const submitDisabled = computed(() => !realname.value || !!realnameError.value)

const loading = ref(false)

const onSubmit = async () => {
	try {
		loading.value = true
		const params = {
			realname: realname.value
		}
		await setRealname(params)
		loading.value = false
		message.success(t('message.saveSuccess'))
		realname.value = ''
		// store.commit('user/updateUserInfo', {
		// 	realName: realname.value
		// })
		await profileStore.getUserInfo()
		onClose()
	} catch (error) {
		loading.value = false
		message.error(error)
	}
}

const emit = defineEmits(['update:modelValue'])

const onClose = () => {
	emit('update:modelValue', false)
}
</script>
<style lang="scss" scoped></style>
